<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="选择群" prop="groupId">
        <el-col :span="15">
          <el-form-item prop="groupId">
            <el-select v-model="queryParams.groupId" placeholder="请选择"
                       style="width: 180px" @change="handleQuery">
              <el-option
                  v-for="dict in userGroups"
                  :key="dict.id"
                  :label="dict.groupName"
                  :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="15">
          <el-date-picker
              v-model="queryParams.findTime"
              type="daterange"
              @change="handleQuery"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="对战类型" prop="orderByType">
        <el-select v-model="queryParams.type1" placeholder="单打，双打，3v3" clearable style="width: 200px"
                   @change="handleQuery">
          <el-option
              v-for="dict in group_bout_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input
            v-model="queryParams.teamOneName"
            placeholder="队伍1"
            @change="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-input
            v-model="queryParams.teamTwoName"
            placeholder="对手"
            label="对手"
            @change="handleQuery"
        />
      </el-form-item>
      <el-form-item label="排序" prop="orderByType">
        <el-select v-model="queryParams.orderByType" placeholder="请选择" clearable style="width: 200px"
                   @change="handleQuery">
          <el-option
              v-for="dict in group_find_order"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="queryParams.orderByTypeDesc" label="倒序" :true-value=2 :false-value=1
                     @change="handleQuery"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <!--        <el-button icon="Refresh" @click="resetQuery">清空</el-button>-->
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['group:guRef:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>
    <h2 class="text-center fs-20" style="margin-top: 20px;">总战绩</h2>
    <el-table v-if="teamStat" :data="teamStat">
      <el-table-column label="" prop=""></el-table-column>
      <el-table-column label="一队" prop="teamOneName"></el-table-column>
      <el-table-column label="二队" prop="teamTwoName"></el-table-column>
      <el-table-column label="奖励" prop="awardCoin"></el-table-column>
      <el-table-column label="胜率" prop="winRate"></el-table-column>
      <el-table-column label="总局" prop="totalBout"></el-table-column>
      <el-table-column label="胜局" prop="winBout"></el-table-column>
      <el-table-column label="负局" prop="loseBout"></el-table-column>
      <el-table-column label="得分" prop="totalScore"></el-table-column>
    </el-table>
    <h2 class="text-center fs-20" style="margin-top: 20px;">每场列表</h2>
    <el-table v-if="teamStatList" :data="teamStatList">
      <el-table-column label="时间" prop="">
        <template #default="scope">
          <span>{{ format(scope.row.createTime,"yyyy-MM-dd HH:mm:ss") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="一队" prop="teamOneName"></el-table-column>
      <el-table-column label="二队" prop="teamTwoName"></el-table-column>
      <el-table-column label="奖励" prop="awardCoin"></el-table-column>
      <el-table-column label="胜率" prop="winRate"></el-table-column>
      <el-table-column label="总局" prop="totalBout"></el-table-column>
      <el-table-column label="胜局" prop="winBout"></el-table-column>
      <el-table-column label="负局" prop="loseBout"></el-table-column>
      <!--      <el-table-column label="净胜" prop="totalScore"></el-table-column>-->
      <el-table-column label="详情">
        <template #default="scope">
          <el-button type="primary" round size="small" @click="searchTxtByImport(scope.row.refId)">查看
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" v-model="open" width="500px" append-to-body @close="open=false,detail=null">
      <span  style="white-space: pre-wrap;">{{detail}}</span>
    </el-dialog>
    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="searchTeamStatTo"
    />
  </div>
</template>

<script setup name="Ref">
import {AES_Decrypt, AES_Encrypt, decrypt} from "@/utils/jsencrypt.js";
import * as groupServer from "@/api/group/group.js";
import * as refServer from "@/api/group/ref.js";
import {rankWebList} from "@/api/group/boutStat.js";
import {searchTeamStat, teamStatImport, txtByImport} from "@/api/group/boutRecord.js";
import {format} from "date-fns";

const {proxy} = getCurrentInstance();
const {
  group_bout_type, group_find_order
} = proxy.useDict("group_bout_type", "group_find_order");
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const open = ref(false);
const detail = ref(null);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("对局文本");
const resetFlag = ref(false);
const route = useRoute();
const router = useRouter();
const groupId = ref(Number(AES_Decrypt(route.query.groupId)) === 0 ? undefined : Number(AES_Decrypt(route.query.groupId)));
const teamStat = ref([])
const teamStatList = ref([])
const userGroups = ref([])
const groupPermitMap = reactive(new Map())
const data = reactive({
  form: {},
  queryParams: {
    orderByType: 1,
    orderByTypeDesc: 2,
    pageNum: 1,
    startTime: null,
    findTime: null,
    endTime: null,
    pageSize: 10,
    type1: 2,
    type2: 2,
    teamOneName: null,
    teamTwoName: null,
    refId: null,
  }
});

const {queryParams, form, rules} = toRefs(data);

const searchTxtByImport = (id) => {
  queryParams.value.refId = id
  open.value = true
  txtByImport(queryParams.value).then(res => {
    queryParams.value.refId = null
    if (res) {
        detail.value = res.data
    }
  })
}

const start = (() => {
  return new Promise(resolve => {
    groupServer.callFindList(null).then(res => {
      userGroups.value = res.data
      userGroups.value.forEach(item => {
        groupPermitMap.set(item.id, item.adminType)
      })
      if (!groupId.value && !resetFlag.value) {
        userGroups.value.forEach(item => {
          if (item.loginDefault === 1) {
            groupId.value = item.id
            queryParams.value.groupId = item.id
          }
        })
      }
      if (!groupId.value && !resetFlag.value) {
        groupId.value = userGroups.value[0].id
        queryParams.value.groupId = userGroups.value[0].id
      }
    }).then(() => {
      // //console.log("start",currentAdmin.value)
      resolve()
    })
  })
})
start()
const searchTeamStatTo = () => {
  queryParams.value.pageNum = 1
  queryParams.value
  searchTeamStat( queryParams.value).then(res => {
    if (res) {
      teamStat.value.push(res.data);
      searchTeamStatImport()
    }
  })
}
const searchTeamStatImport = () => {
  teamStatImport(queryParams.value).then(res => {
    if (res) {
      teamStatList.value = res.data.list
      total.value = res.data.total;
      queryParams.value.pageSize = res.data.pageSize;
      queryParams.value.pageNum = res.data.pageNum;
    }
  })
}

// 表单清空
function reset() {
  form.value = {
    orderByType: 1,
    orderByTypeDesc: 2,
    pageNum: 1,
    startTime: null,
    findTime: null,
    endTime: null,
    pageSize: 10,
    type1: 2,
    type2: 2,
    teamOneName: null,
    teamTwoName: null,
    refId: null,
  };
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  if(!queryParams.value.teamOneName){
    return;
  }
  reset()
  teamStat.value = []
  searchTeamStatTo();
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('group/ref/export', {
    ...queryParams.value
  }, `ref_${new Date().getTime()}.xlsx`)
}

</script>
